<template>
    <view v-if="groupDetail.length !== 0">
        <view class="header">
            <view class="user-info">
                <view class="address-mark" v-if="groupDetail.is_default_address == 1">默认</view>
                <view class="user-name-phone">{{groupDetail.contacts}} {{groupDetail.mobile}}</view>
            </view>
            <view class="address">{{groupDetail.full_address}}</view>
        </view>
        <view class="group-detail">
            <view class="group-person">
                <view class="group-person-item">
                    <view class="user-img">
                        <block v-for="(item, index) in groupDetail.users" :key="index">
                            <img :src="item.avatar_url" alt="" style="width:100%;height:100%" v-if="item.avatar_url">
                            <img :src="base_img_url + '/touxiang.png'" alt="" style="width:100%;height:100%" v-else>
                        </block>
                    </view>
                    <view class="user-name">团主</view>
                </view>
                <!-- <view class="inviteFriend" @click="invitePeople">邀请好友</view> -->
                <button class="inviteFriend" open-type="share">邀请好友</button>
            </view>
            <view class="shopping">
                <view class="shopping-img">
                    <img :src="groupDetail.commodity_image_thum" alt="" style="width:100%;height:100%">
                </view>
                <view class="shopping-info">
                    <view class="shopping-name">{{groupDetail.spu_name}}</view>
                    <view class="shopping-price">￥{{groupDetail.original_price}}</view>
                    <view class="shopping-text">共{{groupDetail.number}}件商品，合计￥{{groupDetail.order_total_price}}（含运费）</view>
                </view>
            </view>
            <view class="shopping-info-list">
                <view class="list-item">商品总价：￥{{groupDetail.order_total_price}}</view>
                <view class="list-item">运费：包邮</view>
                <view class="list-item">订单编号：{{groupDetail.internal_order_sn}}</view>
                <view class="list-item">付款时间：{{groupDetail.payment_at}}</view>
                <view class="list-item">发货时间：{{groupDetail.send_at ? groupDetail.send_at : '发货后显示'}}</view>
                <view class="list-item">支付方式：{{groupDetail.order_status == 1 ? '支付后显示' : '微信支付'}}</view>
                <!-- <view class="list-item">订单备注：无</view> -->
                <view class="list-item">实付款：<text style="color:#FF2525">{{groupDetail.order_status == 1 ? '未支付' : '￥' + groupDetail.order_total_price}}</text></view>
            </view>
        </view>
    </view>
</template>

<script>
import { OrderModel } from '../../model/order'
import { config } from '../../common/utils/congfig'
const orderModel = new OrderModel()
export default {
    data() {
        return {
            base_img_url: config.img_base_url,
            groupId: '',
            groupDetail: []
        }
    },
    onLoad(option) {
        this.groupId = option.id
        this.getGroupDetail()
    },
    methods: {
        getGroupDetail() {
            orderModel.getGroupOrderDetail(this.groupId).then((res) => {
                if(res.code == 200) {
                    this.groupDetail = res.data
                }
            })
        }
    },
    onShareAppMessage(res) {
        return{
            title: '农乎',
            path: '/pages/index/index'
        }
    }
}
</script>

<style>
    .header {
        height: 101rpx;
        background: #ffffff;
        margin-top: 15rpx;
        padding: 30rpx 0 30rpx 65rpx;
    }
    .user-info {
        display: flex;
        justify-content: left;
    }
    .address-mark {
        width: 65rpx;
        height: 31rpx;
        background: #24C79C;
        color: #FFFFFF;
        font-size: 22rpx;
        text-align: center;
        line-height: 30rpx;
        border-radius: 5rpx;
        margin-top: 6rpx;
    }
    .user-name-phone {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
        margin-left: 27rpx;
    }
    .address {
        color: #333333;
        font-size: 30rpx;
        font-weight: 500;
        margin-top: 30rpx;
    }
    .group-detail {
        margin-top: 20rpx;
        background: #FFFFFF;
    }
    .group-person {
        position: relative;
        height: 130rpx;
        padding: 20rpx 0rpx 20rpx 54rpx;
        border-bottom: 1rpx solid #F5F5F5;
        display: flex;
        justify-content: left;
    }
    .group-person-item {
        margin-right: 58rpx;
    }
    .user-img {
        width: 81rpx;
        height: 81rpx;
    }
    .user-name {
        color: #333333;
        font-size: 24rpx;
        text-align: center;
        margin-top: 10rpx;
    }
    .inviteFriend {
        position: absolute;
        right: 61rpx;
        top: 37rpx;
        width: 148rpx;
        height: 46rpx;
        border: 1rpx solid rgba(36,199,156,1);
        border-radius: 23rpx;
        text-align: center;
        line-height: 46rpx;
        color: #24C79C;
        font-size: 28rpx;
        background: #ffffff;
        padding: 0 !important;
    }
    .shopping {
        padding: 38rpx 0 70rpx 58rpx;
        display: flex;
        justify-content: left;
    }
    .shopping-img {
        width: 139rpx;
        height: 139rpx;
        border: 1rpx solid #ccc;
    }
    .shopping-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 23rpx;
    }
    .shopping-name {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .shopping-price {
        color: #FF1E1E;
        font-size: 30rpx;
    }
    .shopping-text {
        color: #999999;
        font-size: 24rpx;
    }
    .shopping-info-list {
        padding-left: 40rpx;
    }
    .list-item {
        height: 76rpx;
        color: #333333;
        font-size: 26rpx;
        font-weight: 500;
    }
</style>